<template>
    <drop-wrap :data="data" :index="index"  :element="element">

      <el-card class="box-card" :id="element.cid">
        <div slot="header" class="header">
          <span>{{element.options.title}}</span>
          <div class="right-handles-wrap">
            <draggable v-model="element.handles" :no-transition-on-drag="true" v-bind="{group:'site', ghostClass: 'ghost',animation: 200, handle: '.mover'}" @add="handlesAdd($event)">
              <transition-group name="fade" tag="div" v-drop-blank class="widget-handles">
                <widget v-for="(el, i) in element.handles" :element="el" :index="i" :key="el.key || Math.random() * 5" :data.sync="element.handles"></widget>
              </transition-group>
            </draggable>
          </div>

        </div>
        <div>
          <draggable v-model="element.container" :no-transition-on-drag="true" v-bind="{group:'site', ghostClass: 'ghost',animation: 200, handle: '.mover'}" @add="handleContainerAdd($event)">
            <transition-group name="fade" tag="div" v-drop-blank class="widget-container" :style="style">
              <widget v-for="(el, i) in element.container" :element="el" :index="i" :key="el.key || Math.random() * 5" :data.sync="element.container"></widget>
            </transition-group>
          </draggable>
        </div>

      </el-card>

    </drop-wrap>
</template>

<script>
  // import cardWidget from '@/low-code/widget/index.vue'
  import clone from 'clone'
  import Draggable from 'vuedraggable'
  export default {
    name: "card",
    props: ["element", "data", "index"],
    data () {
      return {
      }
    },
    computed: {
      store () {
        return this.element.getRoot();
      },
      style(){
        let boxModel={}
        Object.entries(this.element.boxModelStyle).map((item)=>{
              boxModel[item[0]]=item[1]+'px'
        })
        return {
          ...boxModel
        }
      }
    },
    components: { Draggable },
    methods: {
      handlesAdd (evt) {
        const newIndex = evt.newIndex
        //为拖拽到容器的元素添加唯一 key
        if (this.element.handles[newIndex].key) {
          this.store.delComponentMap(this.element.handles[newIndex])
        }
        this.$set(this.element.handles, newIndex, this.store.generateComponent({
          ...clone(this.element.handles[newIndex]),
          fullPath:this.element.fullPath,
        }))
        this.store.current= this.element.handles[newIndex]
        this.$handleStack.push(clone(this.store.root))
      },
      handleContainerAdd (evt) {
        const newIndex = evt.newIndex
        //为拖拽到容器的元素添加唯一 key
        if (this.element.container[newIndex].key) {
          this.store.delComponentMap(this.element.container[newIndex])
        }
        this.$set(this.element.container, newIndex, this.store.generateComponent({
          ...clone(this.element.container[newIndex]),
          fullPath:this.element.fullPath,
          options: {
            ...this.element.container[newIndex].options,
          },
        }))
        this.store.current=this.element.container[newIndex]
        this.$handleStack.push(clone(this.store.root))
      }
    }
  }
</script>

<style scoped >
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: calc(100% - 30px);
  margin: 0 15px;
}

.widget-container {
  min-height: 200px;
}
.widget-handles {
  min-height: 32px;
  min-width: 300px;
}
.widget-handles > .item {
  float: right;
}
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: blue !important;
}

.chosenClass {
  background-color: #67c23a !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

.design-interface .active .el-icon-rank {
  color: #409eff !important;
}
.design-interface .active .el-icon-delete {
  color: #409eff !important;
}

.design-interface .active .mover,
.design-interface .active .action {
  display: block;
}

>>> .el-card__header {
  padding: 0px !important;
  height: 60px !important;
  line-height: 60px !important;
}
.header {
  position: relative;
  padding-left: 20px;
}
.right-handles-wrap {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  line-height: 1;
}
.widget-handles {
  height: 58px;
}
.widget-handles > .item {
  line-height: 55px;
}
</style>

